<template>
  <div style="width: 100%;height:100%">
    <h1>Zego RTC Video Call</h1>
    <button @click="toggleVirtual()">虚化背景</button>
    <hr>
    <video id="local-video" autoplay muted playsinline controls></video>
    
  </div>
  
</template>

<script>
import {ZegoExpressEngine} from 'zego-express-engine-webrtc'
import Vconsole from "vconsole";
import { BackgroundProcess } from'zego-express-engine-webrtc/background-process';
// 引用背景处理模块
ZegoExpressEngine.use(BackgroundProcess);

export default {
  name: 'VirtualBackground',
  props: {
    msg: String
  },
  data() {
    return {
      zg: null,
      appID: 1739272706,
      server: 'wss://webliveroom-test.zego.im/ws',
      userID: 'test_' + new Date().getTime(), // userID 用户自己设置，必须保证全局唯一
      userName: this.userID,// userName 用户自己设置，没有唯一性要求
      roomID: "7858", // roomID 用户自己设置，必须保证全局唯一
      effect: true,
      mixerDate: null, // 混流地址
      streamID: 'stream_' + new Date().getTime(),
      localStream: null,
      enableVirtual: true,
    }
  },
  mounted() {
    this.init();
    new Vconsole();
  },
  methods: {
    async init() {
      this.zg = new ZegoExpressEngine(this.appID, this.server);
      window.zg = this.zg;
      try {
        // 第二个参数传入步骤 2 中的 wasm 等资源文件所在的 URL 路径
        await this.zg.initBackgroundModule(0, "/assets");
      } catch (err) {
        // 控制台打印初始化背景处理模块错误
        console.error('~~~~~~~~', err);
      }
      this.zg.setDebugVerbose(false);
      

      this.zg.on('roomStateUpdate', async (roomID, state, errorCode, extendedData) => {
          console.warn(roomID, state, errorCode, extendedData);
          if(!errorCode) {
              if (state == 'CONNECTED') {
                window.localStream = this.localStream = await this.zg.createStream();
                this.zg.setBackgroundBlurOptions(this.localStream, {
                    blurDegree: 1  // 虚化等级 1、2、3，等级越大，虚化程度越高
                });
                
                document.querySelector("#local-video").srcObject = this.localStream;
              }
          }
      });

      fetch('https://sig-liveroom-admin.zego.cloud/thirdToken/get', {
          method: "POST",
          body: JSON.stringify({
              version: '04', 
              appId: this.appID,
              idName: this.userID,
              roomId: this.roomID,
              privilege: {
                  "1": 1,
                  "2": 1
              },
              expire_time: 100000000
          }),
          dataType: "json",
          contentType: "application/json; charset=utf-8"
      }).then(rsp=> rsp.json()).then(res=> {
          console.warn('[token]', res);
          const token = res.data.token
          // 登录
          this.zg.loginRoom(this.roomID, token, { userID: this.userID, userName: this.userName }, { userUpdate: true })
              .then(rsp=> console.warn('[登录 success]', rsp)).catch(err=> console.warn('[登录 fail]', err))
      });
    },
    toggleVirtual() {
      this.zg.enableBackgroundProcess(this.localStream, this.enableVirtual, 0);
      this.enableVirtual = !this.enableVirtual;
    }
  }
}
</script>
<style scoped>

</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
